<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小兔鲜儿</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/shopping_Car.css">
    <!-- 引入iconfont -->
    <link rel="stylesheet" href="../lib/iconfont/iconfont.css">
    <!-- 引入header相关的 -->
    <link rel="stylesheet" href="../css/header.css">
    <script src="../js/header.js"></script>


</head>

<body>

    <!-- 头部导航 -->
    <header>
        <div class="w">
            <ul>
                <li><a href="javascript:;">请先登录</a></li>
                <li></li>
                <li><a href="javascript:;">免费注册</a></li>
                <li></li>
                <li><a href="../html/orders.html">我的订单</a></li>
                <li></li>
                <li><a href="../html/personal.html">会员中心</a></li>
                <li></li>
                <li><a href="javascript:;">帮助中心</a></li>
                <li></li>
                <li><a href="javascript:;">在线客服</a></li>
                <li></li>
                <li><a href="javascript:;"><i class="iconfont icon-shouji"></i> 手机版</a></li>
            </ul>
        </div>
    </header>
    <!-- 导航栏 -->
    <nav>
        <div class="w">
            <h1 class="logo">
                <a href="javascript:;">
                    小兔鲜儿
                </a>
            </h1>
            <ul>
                <li><a href="../html/index.html">首页</a></li>
                <li><a href="../html/classify.html">居家</a></li>
                <li><a href="javascript:;">美食</a></li>
                <li><a href="javascript:;">服饰</a></li>
                <li><a href="javascript:;">母婴</a></li>
                <li><a href="javascript:;">个护</a></li>
                <li><a href="javascript:;">严选</a></li>
                <li><a href="javascript:;">数码</a></li>
                <li><a href="javascript:;">运动</a></li>
                <li><a href="javascript:;">杂项</a></li>
            </ul>
            <div class="search">
                <i class="iconfont icon-search"></i>
                <input type="text" name="search" id="inp_search" placeholder="搜一搜">
            </div>
            <div class="shoppingCart">
                <i class="iconfont icon-i-shoping-car"></i>
                <span class="showNums"><i>0</i></span>
            </div>
        </div>
    </nav>
    <!-- 滚动才显示的导航栏开始 -->
    <nav class="slide_nav">
        <div class="w">
            <h1 class="logo">
                <a href="javascript:;">
                    小兔鲜儿
                </a>
            </h1>
            <ul>
                <li><a href="../html/index.html">首页</a></li>
                <li><a href="javascript:;">居家</a></li>
                <li><a href="javascript:;">美食</a></li>
                <li><a href="javascript:;">服饰</a></li>
                <li><a href="javascript:;">母婴</a></li>
                <li><a href="javascript:;">个护</a></li>
                <li><a href="javascript:;">严选</a></li>
                <li><a href="javascript:;">数码</a></li>
                <li><a href="javascript:;">运动</a></li>
                <li><a href="javascript:;">杂项</a></li>
            </ul>
            <div class="search">
                <i class="iconfont icon-search"></i>
                <input type="text" name="search" id="inp_search" placeholder="搜一搜">
            </div>
            <div class="shoppingCart">
                <i class="iconfont icon-i-shoping-car"></i>
                <span class="showNums"><i>0</i></span>
            </div>
        </div>
    </nav>
    <!-- 滚动才显示的导航栏结束 -->
    <!-- 购物车结算页面 -->
    <!-- 版心 -->
    <div class="w">
        <!-- 主体内容 -->
        <div class="main">
            <!-- 用户概览 -->
            <div class="main_top">
                <a href="">首页</a>
                <i class="iconfont icon-arrow-right"></i>
                <p>购物车</p>
            </div>
            <!-- 订单栏 -->
            <div class="orders">
                <!-- 顶部信息栏 -->
                <div class="top">
                    <div class="checkAll_wrapper"><input type="checkbox" name="" id="checkAll"> <span
                            class="all">全选</span>
                    </div>
                    <div class="s">商品信息</div>
                    <div>单价</div>
                    <div>数量</div>
                    <div>小计</div>
                    <div>操作</div>
                </div>
                <!-- 订单内容 -->
                <div class="content">
                    <ul id="list">

                    </ul>

                </div>
            </div>


            <!-- 结算栏 -->
            <div class="main_bottom">
                <!-- 下单结算 -->
                <div class="pay">
                    <p> 共 0 件有效商品，已选择 0 件，商品合计：<span class="red
                        ">￥199</span> </p>

                    <button>下单结算</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 尾部关于我们 -->
    <footer>
        <!-- 尾部上面 -->
        <div class="footer_top w">
            <!-- 客户服务 -->
            <div class="kehu">
                <div>客户服务</div>
                <div>
                    <span><i class="iconfont icon-a-4_huaban1"></i>在线客服</span>
                    <span><i class="iconfont icon-question"></i>问题反馈</span>
                </div>
            </div>
            <!-- 关注我们 -->
            <div class="aboutus">
                <div>关注我们</div>
                <div>
                    <span><i class="iconfont icon-weixin"></i>公众号</span>
                    <span><i class="iconfont icon-xinlangweibo"></i>微博</span>
                </div>
            </div>
            <!-- 下载app -->
            <div class="download_app">
                <div>下载APP</div>
                <div>
                    <span><img src="http://megasu.gitee.io/rabbit-vue3-ts/assets/qrcode.520695e8.jpg" alt=""></span>
                    <div class="btn_download">
                        <i>扫描二维码立马下载app</i>
                        <button>下载页面</button>
                    </div>
                </div>
                <div>
                </div>
            </div>
            <!-- 服务热线 -->
            <div class="rexian">
                <div>服务热线</div>
                <div>
                    <div>400-0000-000</div>
                    <div>周一至周日 8:00-18:00</div>
                </div>
            </div>
        </div>
        <!-- 尾部下面 -->
        <div class="footer_bottom">
            <div class="w">
                <div class="footerUp">
                    <div><i class="iconfont icon-xiangzi"></i><span>价格亲民</span></div>
                    <div><i class="iconfont icon-dianzan"></i><span>物流快捷</span></div>
                    <div><i class="iconfont icon-huoche"></i><span>品质新鲜</span></div>
                </div>
                <div class="footerBottom">
                    <ul>
                        <li>关于我们</li>
                        <li></li>
                        <li>帮助中心</li>
                        <li></li>
                        <li>售后服务</li>
                        <li></li>
                        <li>配送与验收</li>
                        <li></li>
                        <li>商务合作</li>
                        <li></li>
                        <li>搜索推荐</li>
                        <li></li>
                        <li>友情链接</li>
                    </ul>
                    <div>CopyRight &copy; 小兔鲜儿</div>
                </div>
            </div>
        </div>
    </footer>
    <script src="../js/shopping_car.js"></script>
</body>

</html>